<template>
	<view class="container">
		<view class="big-box" v-for="(item,index) in listdata">
			<view class="card">
				<view class="title">{{item.record_name}}</view>
				<view v-for="(items,indexs) in item.record_cate_field_config" >
					<view v-if="items.type == 1">
						<view class="top-title">
							{{items.title}}
						</view>
						<view class="input-box">
							<textarea maxlength='1000' @input="iptText($event,index,indexs)" v-model="listdata[index]['record_cate_field_config'][indexs]['aricle_title']" value="" placeholder="如有问题,请填写情况说明" class="input-btn" />
						</view>
					</view>
					<view v-if="items.type == 2">
						<view class="top-title">
							{{items.title}}
						</view>
						<view class="image-box">
							<sunuiUpimg :upImgConfig="upImgBasic" @onUpImg="upBasicData($event,index,indexs)" @onImgDel="delImgInfo" ref="uImage"></sunuiUpimg>
						</view>
					</view>
					<view v-if="items.type == 3">
						<view class="top-title">
							{{items.title}}
						</view>
						<view class="switch-box" v-for="(itm,idx) in items.use_field" @tap="switchBtn(index,indexs,idx,itm)" >
							<view class="switch"
							 :class="{ 'switch1':(type=='radio' && items['num'] == idx)}">
								<view class="switch-mini" :class="{ 'switch-mini1':(type=='radio' && items['num'] == idx)}"></view>
							</view>
							<view class="switch-text">{{itm}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button type="primary" :style="btn_style" class="btn" @tap="uPublishTap">提交</button>
	</view>
</template>

<script>
	import sunuiUpimg from "../../../appComponent/uni/sunui-upimg/sunui-upimg-basic.vue"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getaddinfo = () => {
		common.post('HouseApi&a=add_record_info', {
			qrcode_id: _this.qrcode_id,
		}, data => {
			console.log('++++', data)
			_this.listdata = data.task_list;
			_this.cate_id = data.cate_id
			// _this.listdata['record_cate_field_config']['num'] = 0;
		});
	};
	const getaddinfobtn = () => {
		common.post('HouseApi&a=add_record', {
			village_id:_this.village_id,
			qrcode_id: _this.qrcode_id,
		}, data => {
			console.log('++++', data)
			_this.listdata = data.task_list;
		});
	};
	export default {
		components: {
			sunuiUpimg
		},
		data() {
			return {
				listdata: {},
				numlist: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				aricle_title:'',
				qrcode_id: '',
				type: 'radio',
				cate_id: '',
				list: [{
						text: '正常'
					},
					{
						text: '异常'
					}
				],
				isOpen: true,
				basicArr: [],
				upImgBasic: {
					// 后端图片接口地址
					basicConfig: {
						url: common.requestDomain + 'appapi.php?g=Appapi&c=HouseApi&a=qrcode_image'
					},
					// 是否开启提示(提醒上传图片的数量)
					tips: true,
					// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
					notli: true,
					// 图片数量
					count: 9,
					// 相机来源(相机->camera,相册->album,两者都有->all,默认all)
					sourceType: 'all',
					// 是否压缩上传照片(仅小程序生效)
					sizeType: true,
					// 上传图片背景修改 
					upBgColor: '#E8A400',
					// 上传icon图标颜色修改(仅限于iconfont)
					upIconColor: '#fff',
					// 上传svg图标名称
					// upSvgIconName: 'icon-card',
					// 上传文字描述(仅限四个字)
					// upTextDesc: '上传证书',
					// 删除按钮位置(left,right,bleft,bright),默认右上角
					delBtnLocation: '',
					// 是否隐藏添加图片
					// isAddImage: false,
					// 是否隐藏删除图标
					// isDelIcon: false,
					// 删除图标定义背景颜色
					// delIconColor: '',
					// 删除图标字体颜色
					// delIconText: '',
					// 上传图标替换(+),是个http,https图片地址(https://www.playsort.cn/right.png)
					iconReplace: common.requestDomain + 'static/images/house/upimage.png',
				},  
			}
		},
		onReady() {
			//执行计算组件高度方法
			// _this.$refs['uImage'].numimg = 99;
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.qrcode_id = options.qrcode_id
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif
			
			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				getaddinfo()
			});
		},
		methods: {
			switchBtn(index,indexs,idx,itm) {
				console.log("7777777777777777777777777777777777",index,indexs,idx,itm)
				_this.listdata[index]['record_cate_field_config'][indexs]['num'] = idx;
				_this.listdata[index].record_cate_field_config[indexs].value = itm;
				_this.$forceUpdate();
				console.log('list', _this.listdata);
			},
			iptText(e,index,indexs){
				console.log("666666666 66",e);
				_this.listdata[index].record_cate_field_config[indexs].value = e.detail.value;
				console.log("uuuuuuuuuuuuuuuuuu",_this.listdata)
				console.log("666666666 66",e);
			},
			uPublishTap() {
				var msg = '';
				var len = _this.listdata.length - 1;
				for(let i in _this.listdata){
					var lenk = _this.listdata[i].record_cate_field_config.length - 1;
					for(let k in _this.listdata[i].record_cate_field_config){
						if(_this.listdata[i].record_cate_field_config[k].is_must == 1 && _this.listdata[i].record_cate_field_config[k].value == "" && !msg){
							msg = "请输入" + _this.listdata[i].record_cate_field_config[k].title
						}
						if(i==len && k==lenk && !msg){
							console.log("到底提交了没")
							var postData = {
								village_id: _this.village_id,
								qrcode_id: _this.qrcode_id,
								cate_id: _this.cate_id,
								test: _this.listdata,
							};
							console.log('_this.basicArr.postData', postData);
							
							common.post('HouseApi&a=add_record', postData
							, data => {
							  uni.showModal({
							  	title: common.changeTxt('提示'),
							  	content: common.changeTxt('上报成功'),
							  	showCancel: false,
							  	confirmText: common.changeTxt('好的'),
							  	success: function(res) {
							  		if (res.confirm) {
										uni.navigateBack()
							  		}
							  	}
							  });
							});
						} else if (i==len && k==lenk && msg) {
							uni.showModal({
								title: common.changeTxt('提示'),
								content: msg,
								showCancel: false,
								confirmText: common.changeTxt('确定'),
								success: function(res) {
									if (res.confirm) {
							
									}
								}
							});
						}
					}
					
				}
			},
			// 删除图片 -2019/05/12(本地图片进行删除)
			async delImgInfo(e) {
				console.log('你删除的图片地址为:', e, this.basicArr.splice(e.index, 1));
			},
			// 基础版
			async upBasicData(e,index,indexs) {
				_this.$refs['uImage'].numimg = 99
				console.log("77775555555557",_this.$refs['uImage'])
				console.log('===>',e);
				// 上传图片数组
				let arrImg = [];
				for (let i = 0, len = e.length; i < len; i++) {
					try {
						if (e[i].path_server != "") {
							await arrImg.push(e[i].path_server);
						}
					} catch (err) {
						console.log('上传失败...');
					}
				}
				// 图片信息保存到data数组
				this.basicArr = arrImg;
				_this.listdata[index].record_cate_field_config[indexs].value = this.basicArr;
				// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
				if (arrImg.length == this.upImgBasic.count) {
					uni.showToast({
						title: `上传成功`,
						icon: 'none'
					});
				}
			},
		},

	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.big-box {
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
		background: #FFFFFF;
		overflow: hidden;
		border-radius: 20rpx;
		margin: 30rpx 20rpx 0rpx 20rpx;
	}

	.card {
		padding: 0rpx 30rpx 30rpx 30rpx;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0rpx;
		color: #100f3e;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.top-title {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.top-title:before {
		content: '';
		background: #FFFFFF;
		display: block;
		width: 8rpx;
		height: 8rpx;
		border: 4rpx solid rgb(74, 151, 248);
		border-radius: 8rpx;
		margin-right: 15rpx;
	}

	.switch-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20rpx;
	}

	.switch {
		width: 22rpx;
		height: 22rpx;
		border-radius: 22rpx;
		background: #FFFFFF;
		border: 2rpx solid #e1e1e1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.switch-mini {
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		background: #e1e1e1;
	}

	.switch1 {
		width: 22rpx;
		height: 22rpx;
		border-radius: 22rpx;
		background: #FFFFFF;
		border: 2rpx solid rgb(29, 126, 247);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.switch-mini1 {
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		background: rgb(29, 126, 247);
	}

	.switch-text {
		margin-left: 15rpx;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #606060;
	}
	.btn {
		margin: 50rpx;
		border-radius: 50rpx;
	}
	.input-box {
		/* margin-top: 40rpx; */
	}
	.input-btn {
		height: 200rpx;
		width: 100%;
		background-color: rgb(249, 249, 249);
		border-radius: 20rpx;
		padding: 15rpx 0rpx 0rpx 15rpx;
	}
	.switch-img {
		width: 100rpx;
		height: 100rpx;
	}
	./deep/ .uni-textarea-textarea {
		padding: 15rpx;
	}
</style>
